<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <!--<link rel="icon" href="../../favicon.ico">-->

        <title>SearchGazer: Webcam Eye Tracking for Remote Studies of Web Search</title>

        <!-- Bootstrap core CSS -->
        <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

        <link rel="stylesheet" href="../css/highlight/styles/default.css">
        <script src="../css/highlight/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>

<style type="text/css">
body {
    position: relative;
    min-height: 2000px;
}

.padright {
    padding-top: 0px;
    margin-bottom: 22px;
}
.pad {
    padding-top: 10px;
    margin-bottom: 20px;
}

.jumbotron {
    background-color:transparent !important;
}

.jumbotron p {
    font-size: 16px;
}

p > code.hljs { display: inline; }

        </style>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>


    <body data-spy="scroll" data-target="#navbar">

        <!-- Fixed navbar -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <a class="navbar-brand" href="#">SearchGazer</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active nav-item"><a class="nav-link" href="#home">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#usage">Usage</a></li>
                        <li class="nav-item"><a class="nav-link" href="#support">Browser Support</a></li>
                        <li class="nav-item"><a class="nav-link" href="#engine">Search Engine Support</a></li>
                        <li class="nav-item"><a class="nav-link" href="#download">Download</a></li>
                        <li class="nav-item"><a class="nav-link" href="#examples">Examples</a></li>
                        <li class="nav-item"><a class="nav-link" href="#publication">Publication</a></li>
                        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div id="home" class="container pad" style="padding-top: 0px">
<a href="https://github.com/brownhci/searchgazer"><img style="position: absolute; top: 30; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>            <!-- Main
            component for a primary marketing message or call
            to action -->
            <div class="jumbotron">
                <h1 class="text-center" style="margin-bottom:20px"> SearchGazer </h1>
                <h2 class="text-center" style="margin-bottom:0px"> Webcam Eye Tracking for Remote Studies of Web Search</h2>
            </div>
            <hr class="featurette-divider">
            <div id="description" class="container pad">
                <p class="text-justify">
                    SearchGazer is an eye tracking library that uses common webcams to infer the eye-gaze locations of visitors on a search engine in real time. In addition, SearchGazer predicts in real-time which area of interest within a search engine result page is being examined by a visitor at any moment. SearchGazer extends <a href="webgazer.cs.brown.edu">WebGazer</a> and its eye tracking model that self-calibrates by watching web visitors interact with the web page and trains a mapping between the features of the eye and positions on the screen. SearchGazer is written entirely in JavaScript and with only a few lines of code can be integrated in any search engine that wishes to conduct remote eye tracking studies. SearchGazer runs entirely in the client browser, therefore no video data needs to be sent to a server. SearchGazer runs only if the user consents in giving access to their webcam.
                </p>
            </div>

        <hr class="featurette-divider">

        <div id="usage" class="container pad">
            <h2 class="text-center">Usage</h2>
            <div class="row">
                <div class="col-lg-12">
                    For SearchGazer to perform eye tracking you need to add the searchgazer.js file as a script in your search engine:
                    <pre><code class="html hljs"> /* WebGazer.js library */
&lt;script src="searchgazer.js" type="text/javascript" &gt;</code></pre>
                    <p>
                        <i>Be aware that when you do local development and you might need to run locally a simple http server that supports the https protocol. </i>
                    </p>
                    <p>
                        Once the script is included, the <code class="javascript">webgazer</code> object is introduced into the global namespace. <code class="javascript">webgazer</code> has methods for controlling the operation of WebGazer.js allowing us to start and stop it, add callbacks, or change out modules. The two most important methods on <code class="javascript">webgazer</code> are <code class="javascript">webgazer.begin()</code> and <code class="javascript">webgazer.setGazeListener()</code>. <code class="javascript">webgazer.begin()</code> starts the data collection that enables the predictions, so it's important to call this early on. Once <code class="javascript">webgazer.begin()</code> has been called, WebGazer.js is ready to start giving predictions. <code class="javascript">webgazer.setGazeListener()</code> is a convenient way to access these predictions. This method invokes a callback you provide every few milliseconds to provide the current gaze location of a user. If you don't need constant access to this data stream, you may alternatively call <code class="javascript">webgazer.getCurrentPrediction()</code> which will give you a prediction at the moment when it is called.
                    </p>

                    <pre><code class="javascript hljs">
webgazer.setGazeListener(function(data, elapsedTime) {
    if (data == null) {
        return;
    }
    var xprediction = data.x; //these x coordinates are relative to the viewport
    var yprediction = data.y; //these y coordinates are relative to the viewport
    console.log(elapsedTime); //elapsed time is based on time since begin was called
}).begin();
                    </code></pre>
                    <p> Here is the alternate method of getting predictions where you can request a gaze prediction as needed. </p>
                    <pre><code class="javascript hljs">
var prediction = webgazer.getCurrentPrediction();
if (prediction) {
    var x = prediction.x;
    var y = prediction.y;
}
                    </code></pre>
                </div>
            </div>
            <h3 class="text">Advanced Usage</h3>
            <p>There are several features that WebGazer.js enables beyond the example shown so far.<p>
            <div class="row">
                <div class="col-lg-12">
                    <h4>Saving Data Between Sessions</h4>
                    <p>WebGazer.js can save and restore the training data between browser sessions by storing data to localstorage. This occurs automatically when <code class="javascript">end()</code> is called. If you want each user session to be independent make sure that you do not call the <code class="javascript">end()</code> function. </p>
                    <pre><code class="javascript hljs">webgazer.end()</code></pre>
                </div>
            </div>
            <div>
                <h4>Changing in Use Regression and Tracker Modules</h4>
                <p>At the heart of WebGazer.js are the tracker and regression modules. The tracker module controls how eyes are detected and the regression module determines how the regression model is learned and how predictions are made based on the eye patches extracted from the tracker module. These modules can be swapped in and out at any time. We hope that this will make it easy to extend and adapt WebGazer.js and welcome any developers that want to contribute.</p>

                <p>WebGazer.js requires the bounding box that includes the pixels from the webcam video feed that correspond to the detected eyes of the user. Currently we include three external libraries that implement different Computer Vision algorithms to detect the face and eyes.</p>
                <div class="row">
                    <div class="col-lg-12">
                        <pre><code class="javascript hljs">webgazer.setTracker("clmtrackr"); //set a tracker module</code></pre>
                        <pre><code class="javascript hljs">webgazer.addTrackerModule("newTracker", NewTrackerConstructor); //add a new tracker module</code></pre>
                        <p>Here are all the external tracker modules that come by default with WebGazer.js. Let us know if you want to introduce your own facial feature detection library. </p>
                        <ul>
                            <li><a href="https://github.com/auduno/clmtrackr">clmtrackr</a></li>
                            <li><a href="https://github.com/mtschirs/js-objectdetect">js_objectdetect</a></li>
                            <li><a href="https://trackingjs.com/">tracking.js</a></li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <pre><code class="javascript hljs">webgazer.setRegression("ridge"); //set a regression module</code></pre>
                        <pre><code class="javascript hljs">webgazer.addRegressionModule("newReg", NewRegConstructor); //add a new regression module</code></pre>
                        <p>Here are all the regression modules that come by default with WebGazer.js. Let us know if you would like introduce different modules - just keep in mind that they should be able to produce predictions very fast.</p>
                        <ul>
                            <li>ridge - a simple ridge regression model mapping pixels from the detected eyes to locations on the screen.</li>
                            <li>weightedRidge - a weight ridge regression model with newest user interactions contribution more to the model.</li>
                            <li>threadedRidge - a faster implementation of ridge regression that uses threads.</li>
                            <li>linear - a basic simple linear regression that maps </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <h4>Pause and Resume</h4>
                    <p>It may be necessary to pause the data collection and predictions of WebGazer.js for performance reasons.</p>
                    <pre><code class="javascript hljs">
webgazer.pause(); //WebGazer.js is now paused, no data will be collected and the gaze callback will not be executed
webgazer.resume(); //data collection resumes, gaze callback will be called again
                    </code></pre>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <h4>Util and Params</h4>
                    <p>We provide some useful functions and objects in <code class="javascript">webgazer.util</code>. The webgazer.params object also contains some useful parameters to tweak to control video fidelity (trades off speed and accuracy) and sample rate for mouse movements.</p>
                    <pre><code class="javascript hljs">
webgazer.util.bound(prediction);
prediction.x; //now always in the bounds of the viewport
prediction.y; //now always in the bounds of the viewport
                    </code></pre>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <h4>Detecting Areas Of Interesting in Search Engine</h4>
                    When a searcher issues a query, SearchGazer can detect which areas of interest (organic results, related searches, ads, etc.) the searcher is examining in real time. SearchGazer currently supports detection of DOM elements for Bing and Google. Simply call the functions <code class="javascript">findDomElementBing(x,y)</code> and <code class="javascript">findDomElementGoogle(x,y)</code> respectively, which given a pair of coordinates within the search engine page will return the corresponding DOM element.
                </div>
            </div>

        </div>


        <hr class="featurette-divider">
        <div id="support" class="container pad">
            <h2 class="text-center">Browser Support</h2>
            <p class="text-left" pad>
                SearchGazer uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">getUserMedia/Stream API</a> to get access to the webcam. These browsers are currently supported, as seen <a href="http://caniuse.com/#feat=stream">here</a>.
            </p>

            <div class="row">
                <div class="col-lg-3">
                    <center>
                        <img src="../media/browser/chrome.png" alt="Google Chrome" width="100" height="100" >
                    </center>
                    <h4 class="text-center">Google Chrome 47+</h4>
                </div>
                <div class="col-lg-3">
                    <center>
                        <img src="../media/browser/edge.png" alt="Microsoft Edge" width="100" height="100">
                    </center>
                    <h4 class="text-center">Microsoft Edge 13+</h4>
                </div>
                <div class="col-lg-3">
                    <center>
                        <img src="../media/browser/firefox.png" alt="Mozilla Firefox" width="100" height="100">
                    </center>
                    <h4 class="text-center">Mozilla Firefox 44+</h4>
                </div>
                <div class="col-lg-3">
                    <center>
                        <img src="../media/browser/opera.png" alt="Opera" width="100" height="100">
                    </center>
                    <h4 class="text-center">Opera 36+</h4>
                </div>
            </div>
        </div>


        <hr class="featurette-divider">
        <div id="engine" class="container pad">
            <h2 class="text-center">Search Engine Support</h2>
            <p class="text-left" pad>
                SearchGazer can identify which areas of interests are being examined in real time for the following search engines:</p>
            <div class="row">
                <div class="col-lg-6">
                    <center>
                        <img src="media/bing.png" alt="Bing" height="100">
                    </center>
                    <h4 class="text-center">Bing</h4>
                </div>
                <div class="col-lg-6">
                    <center>
                        <img src="media/google.png" alt="Google" height="100" >
                    </center>
                    <h4 class="text-center">Google</h4>
                </div>
            </div>
        </div>


        <hr class="featurette-divider">
        <div id="download" class="container pad">
            <h2 class="text-center">Download Instructions</h2>
            <div class="row">
                <p class="text-left" pad>
                Download searchgazer.js and add it as a script in your HTML page. For instructions on how to initialize the eye tracking and area of interest detection check the <a href="#usage">Usage</a> section.
                <div class="col-lg-4">
                    <h3 class="pad">SearchGazer</h3>
                    <form method="get" action="searchgazer.js">
                        <button class="btn btn-primary btn-lg" type="submit"><span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span> Download SearchGazer</button>
                    </form>
                </div>
            </div>
        </div>


        <hr class="featurette-divider">
        <div id="examples" class="container pad">
            <h2 class="text-center pad">Examples</h2>
            <div class="row">

                <div class="col-lg-6">
                    <center>
                        <img src="media/bing_serp.png" alt="Bing Demo" height="280">
                    </center>
                    <h4 class="text-center">Bing</h4>
                </div>
                <div class="col-lg-6">
                    <center>
                        <img src="media/google_serp.png" alt="Google Demo" height="280">
                    </center>
                    <h4 class="text-center">Google</h4>
                </div>
                <div class="col-lg-12">

                    <h4 class="pad">SearchGazer on Bing or Google</h4>
                    <p>See how SearchGazer works on Bing and Google. The only thing you need to do is make sure your face is captured correctly and on the next page click the center of a black circle that will appear in different locations within your screen. Once you have successfully clicked the target for 9 times you can choose to see SearchGazer's predictions in action on a Bing or Google demo. The areas of interest that correspond to the location of the predicted gaze will be logged in the console.
                        <form method="get" action="https://webgazer.cs.brown.edu/search/examples/face_detection.htm?">
                        <button class="btn btn-primary" type="submit">Try Live!</button>
                    </form>
                    </p>
                </div>
            </div>
        </div>


        <hr class="featurette-divider">
        <div id="publication" class="container pad">
            <h2 class="text-center">Publication</h2>
            <p>If you use SearchGazer please cite the following paper:</p>
            <code>
                @inproceedings{papoutsaki2017searchgazer,<br>
                author     = {Alexandra Papoutsaki and James Laskey and Jeff Huang},<br>
                title      = {SearchGazer: Webcam Eye Tracking for Remote Studies of Web Search},<br>
                booktitle  = {Proceedings of the ACM SIGIR Conference on Human Information Interaction \& Retrieval (CHIIR)},<br>
                year       = {2017},<br>
                organization={ACM}<br>
                }
            </code>
        </div>

        <hr class="featurette-divider">
        <div id="contact" class="container pad">
            <h2 class="text-center pad">Who We Are</h2>
            <div class="row">
                <!-- bootstrap has 12 columns, so each person gets part of that 12 cols -->

                <div class="col-lg-4">
                    <img class="rounded-circle mx-auto d-block" src="../media/people/alexpap.jpg" alt="Alexandra Papoutsaki" height="140">
                    <h4 class="text-center"><a href="http://www.cs.pomona.edu/~apapoutsaki/">Alexandra Papoutsaki</a></h4>
                </div>
                <div class="col-lg-4">
                    <img class="rounded-circle mx-auto d-block" src="../media/people/jim.jpg" alt="James Laskey" height="140">
                    <h4 class="text-center">James Laskey</h4>
                </div>
                <div class="col-lg-4">
                    <img class="rounded-circle mx-auto d-block" src="../media/people/jeff.jpg" alt="Jeff Huang" height="140">
                    <h4 class="text-center"><a href="http://jeffhuang.com">Jeff Huang</a></h4>
                </div>
            </div>
        </div>
        <hr class="featurette-divider">
        <div id="license" class="container pad">
            <h2 class="text-center">License</h2>
            <p class="text-center">Copyright (C) 2020 <a href="http://hci.cs.brown.edu">Brown HCI Group</a><br>
            Licensed under <a href="http://www.gnu.org/licenses/gpl-3.0.en.html">GPLv3</a>.
            </p>

        <script src="../node_modules/jquery/dist/jquery.min.js"></script>
        <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    </body>
</html>
